<template>
    <div class="map">
        <Section title="位置周边" more-text="查看更多周边信息">
            <div class="baidu" ref="mapRef"></div>
        </Section>
    </div>
</template>

<script setup>
import Section from "@/components/detail/section.vue";
import useDeatilStore from "@/stores/modules/detail";
import { storeToRefs } from "pinia";
import { computed, onMounted, ref } from "vue";

// const detailStore = useDeatilStore();
// const { mainPart } = storeToRefs(detailStore);
// const position = computed(() => mainPart.value.dynamicModule?.positionModule);
const props = defineProps({
  position: {
    type: Object,
    default: () => ({})
  }
})
console.log(props.position)

const mapRef = ref()

onMounted(() => {
    const map = new BMapGL.Map(mapRef.value);          // 创建地图实例 
    // const point = new BMapGL.Point(position.value?.longitude, position.value?.latitude);  // 创建点坐标 
    const point = new BMapGL.Point(props.position.longitude, props.position.latitude); // 创建点坐标 
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    const marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中    
})

</script>

<style lang="less" scoped>
.baidu {
  height: 250px;
}
</style>